import { PureComponent } from 'react';
import { connect } from 'dva';
import { InputItem } from 'antd-mobile';
import MToast from "../../Util/MToast"
import { isNull, handleInputFocusBlur } from "../../../utils/helper"
interface Props {
	value?: any,
	onChange?: Function,
	max?: any,
	min?: any,
	step?: any,
	setFieldsValue?: Function,
	field: string[],
	required?: any,
	readonly?: any,
	disabled?: any,
	place_holder?: any,
	tips?: string,
	label_width?: any,
	hasError?: boolean,
	errorMsg?: string,
	show_label?: any,
	label_text_align?: any,
	input_style?: any,
	required_no_star?: any
	type?: string
}
interface State {
	value?: any
}
export default class MyInputNumber extends PureComponent<Props, State>{
	userNameInput: any;
	public state: State = {
		value: this.props.value
	}

	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}


	changeValue = (value) => {
		console.log("value", value);
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};

	componentDidMount() {
		let { value, max, min } = this.props;
		let newVal = value;
		if (!isNull(max)) {
			if (value >= max) {
				newVal = max
			}
		}
		if (!isNull(min)) {
			if (value <= min) {
				newVal = min
			}
		}
		if (value !== newVal) {
			this.changeValue(value)
		}
	}

	onChange = (val) => {
		let value = val;
		const reg1 = /^[0-9]{1,}.{0,1}([0-9]*)?$/;
		const reg = /^-(([0-9]{0,})|([0-9]{1,}.{0,1}))([0-9]*)?$/;//匹配 - 号开头的数
		if ((reg.test(value)) || (reg1.test(value)) || value === '') {
			if (value.toString().indexOf(".") == value.length - 1) {
			}
			else if (value.toString().indexOf("-") == 0) {
				if (!isNaN(parseFloat(value))) {
					if (parseFloat(value) == 0) {

					}
					else {
						value = parseFloat(value)
					}
				}
			}
			else if (isNaN(value)) {
				value = parseFloat(value)
			}
			else {
				// value=Number(value)//会把0.0 设置成0 小数点后的0输不进去
			}
			this.changeValue(value)
		}
	};
	onBlur = (val) => {
		handleInputFocusBlur(true);
		if (!isNull(val)) {
			if (val.toString().indexOf(".") == val.length - 1) {
				val = Number(val.substring(0, val.length - 1))
			}
			else if (val === "-") {
				val = undefined
			}
			else if (val.toString().indexOf("-") == 0) {
				if (!isNaN(parseFloat(val))) {
					if (parseFloat(val) == 0) {
						val = 0
					}
					else {
						val = parseFloat(val)
					}
				}
			}
			else {
				if (isNaN(Number(val))) {
					val = undefined
				}
				else {
					val = Number(val)
				}
			}
			let { max, min } = this.props;
			if (!isNull(max)) {
				if (val >= max) {
					val = max
				}
			}
			if (!isNull(min)) {
				if (val <= min) {
					val = min
				}
			}
			this.changeValue(val)
		}
	};
	emitEmpty() {
		const { setFieldsValue, field } = this.props;
		this.userNameInput.focus();
		setFieldsValue({
			[field[0]]: null
		})
	}
	sub = (disabled) => {
		if (disabled) {
			return;
		}
		let { value } = this.state;
		let { step, min } = this.props;
		step = isNull(step) ? 1 : step;
		if (isNull(value)) {
			value = 0
		}
		value = value - step * 1;
		if (!isNull(min)) {
			if (value <= min) {
				value = min
			}
		}
		this.changeValue(value)
	};
	add = (disabled) => {
		if (disabled) {
			return
		}
		let { value } = this.state;
		let { step, max } = this.props;
		step = isNull(step) ? 1 : step;
		if (isNull(value)) {
			value = 0
		}
		value = Number(value) + step * 1;
		if (!isNull(max)) {
			if (value >= max) {
				value = max
			}
		}
		this.changeValue(value)
	};
	render() {
		let { required, readonly, disabled, place_holder, tips, label_width = 5, hasError, errorMsg, min, max, show_label = 1, label_text_align = "left", input_style, required_no_star, type } = this.props;
		if (isNull(type)) {
			type = "number"
		}
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let { value } = this.state;

		let isRequired = required == 1;
		let requiredClass = "";
		if (isRequired && required_no_star != 1) {
			requiredClass = "required"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		let left = 20;
		if (isShowLabel) {
			left += label_width * 17;
		}
		let addDisabled = isDisabled || isReadonly;
		let subDisabled = isDisabled || isReadonly;
		if (!isNull(max) && value >= max) {
			addDisabled = true;
		}
		if (!isNull(min) && value <= min) {
			subDisabled = true;
		}
		return (
			<div style={{ position: "relative" }} className="mi-input-int">
				<InputItem
					type={type}
					style={{
						...input_style
					}}
					className={requiredClass}
					onExtraClick={() => {
						MToast.info(tips, 1, null, false)
					}}
					onChange={this.onChange}
					editable={!isReadonly}
					disabled={isDisabled}
					clear
					placeholder={place_holder}
					value={value}
					labelNumber={label_width}
					error={hasError}
					onFocus={() => {
						handleInputFocusBlur()
					}}
					onBlur={this.onBlur}
					onErrorClick={() => {
						MToast.info(errorMsg, 1, null, false)
					}}
				>{this.props.children}</InputItem>
				{
					tips && <p className="tipsStyle">{tips}</p>
				}
			</div>
		)
	}
}